<!--滑动展示页-->
<template>
    <div>
      <el-carousel :interval="3000" type="slide" height="500px">
        <el-carousel-item v-for="(item, index) in items" :key="index">
          <!-- 添加一个容器元素来包裹图片 -->
          <div class="carousel-image-container">
            <img :src="item" :alt="'Slide ' + (index + 1)" @click="goToDetailPage(index)" style="width: 80%; height: 100%">
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
  </template>
  
  
  <script>
  export default {
    name: 'Carousel',
    data() {
      return {
        items: [
          require('@/assets/guanggao.png'),
          require('@/assets/lunbo2.png'),
        //   require('@/assets/lb03.png'),
        //   require('@/assets/lb04.png')
        ]
      };
    },
    methods: {
        // 跳转到商品详情页面
      goToDetailPage(index) {
        this.$router.push({ path: '/details', query: { id: 200 } });
           
        console.log('跳转到商品详情页面，商品索引为：', index);
        
      }
    }
  };
  </script>
  
  <style scoped>
  /* 定义容器元素的样式 */
  .carousel-image-container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100%;
  }
  </style>